<template>
  <div class="all">
    <header>
      <div class="div">
        <img src="../../../assets/返回.png" @click="back()" alt="">
        <span class="solid" @click="back()">返回</span>
      </div>
      <div class="div">
        <span>{{title}}</span>
      </div>
      <div class="div">
        <span class="solid"  @click="doctorKeep()">保存</span>
      </div>
    </header>
    <div class="label" style="justify-content: space-between">
      <span style="display: flex;align-items: center"><a class="hengGang"></a>{{labelTitle}}建议</span>
<!--      <span style="color: #1DA4F2">常用语</span>-->
    </div>
    <div class="textDiv">
      <textarea
        v-model="doc_advise" maxlength="1000"
      :placeholder="placeholderMsg">
      </textarea>
      <span>{{doc_advise.length}} / 1000</span>
    </div>
<!--    <div class="buttonDiv">-->
<!--      <button @click="runInformation()">查看咨询人资料</button>-->
<!--      <button @click="runDangAn()">查看咨询人档案</button>-->
<!--    </div>-->
    <van-dialog v-model="backShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认返回吗？"
                @confirm="backConfirm()"
                show-cancel-button>
      <template #default>
        <div style="padding: 10px;
        box-sizing: border-box;
        font-size: 15px;
        margin: 10px auto;
display: flex;align-items: center;justify-content: center">
          {{msg}}</div>
      </template>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from 'vant'

export default {
  name: 'ViewWenzhenSuggest',
  data () {
    return {
      id: this.$route.query.id,
      doc_advise: '',
      backShow: false,
      item: '',
      msg: '',
      title: '',
      is_advice_edit: this.$route.query.is_advice_edit,
      type: '',
      placeholderMsg: '',
      labelTitle: ''
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    runInformation () {
      sessionStorage.setItem('doc_advise', this.doc_advise)
      this.$router.push({path: '/patientInformation', query: {id: this.id}})
    },
    runDangAn () {
      sessionStorage.setItem('doc_advise', this.doc_advise)
      this.$router.push({path: '/filesXiang', query: {userid: this.item.patient_user_id}})
    },
    // 结束咨询接口
    jieShu () {
      this.$http.endTuWenZhenDoc({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            // Toast('操作成功，此次咨询已结束')
            Toast('保存成功')
            this.$router.history.go(-1)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 保存
    doctorKeep () {
      if (this.doc_advise === '') {
        Toast('请输入咨询建议')
        return false
      }
      this.$http.updateDocSuggest({id: this.id, doc_advise: this.doc_advise})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            if (this.is_advice_edit !== '' && this.is_advice_edit !== null && this.is_advice_edit !== undefined) {
              Toast('保存成功')
              this.$router.history.go(-1)
            } else {
              this.jieShu()
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取是否有填写过建议
    getData () {
      this.$http.findOneInquiry({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.item = res.data.data
            this.doc_advise = res.data.data.doc_advise
            if (this.doc_advise !== '' && this.doc_advise !== null && this.doc_advise !== undefined) {
            } else {
              this.doc_advise = ''
            }
            if (sessionStorage.getItem('doc_advise') !== null) {
              this.doc_advise = sessionStorage.getItem('doc_advise')
            }
            this.type = Number(res.data.data.type)
            if (this.type !== 5) {
              this.placeholderMsg = '请输入咨询后的建议'
              this.labelTitle = '咨询'
              if (this.is_advice_edit !== '' && this.is_advice_edit !== null && this.is_advice_edit !== undefined) {
                this.msg = '如若返回本次咨询建议将不做保存'
                this.title = '修改咨询建议'
                document.title = '修改咨询建议'
              } else {
                this.msg = '如若返回本次咨询建议将不做保存，咨询无法结束'
                this.title = '填写咨询建议'
                document.title = '填写咨询建议'
              }
            } else {
              this.placeholderMsg = '请输入会诊后的建议'
              this.labelTitle = '会诊'
              if (this.is_advice_edit !== '' && this.is_advice_edit !== null && this.is_advice_edit !== undefined) {
                this.msg = '如若返回本次会诊建议将不做保存'
                this.title = '修改会诊建议'
                document.title = '修改会诊建议'
              } else {
                this.msg = '如若返回本次会诊建议将不做保存，会诊无法结束'
                this.title = '填写会诊建议'
                document.title = '填写会诊建议'
              }
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    backConfirm () {
      this.backShow = false
      this.$router.history.go(-1)
    },
    // 返回
    back () {
      this.backShow = true
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  overflow: auto;
  /*background: #FAF9FE;*/
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  background: white;
  position: sticky;
  top: 0;
  border-bottom: 1px solid #E5E5E5;
}
.div{
  width: 33%;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.div:nth-child(1) img{
  width: 7px;
  height: 13px;
  margin: 0 5px 0 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.solid{
  color: #1DA4F2;
}
.hengGang{
  display: block;
  width: 2px;
  border-radius: 1px;
  height: 15px;
  background: #1DA4F2;
  margin-right: 5px;
}
.label{
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  background: white;
}
.textDiv{
  /*width: 100%;*/
  /*background: white;*/
  width: 92%;
  height: 60%;
  resize: none;
  background: #FAF9FE;
  border-radius: 10px;
  border: none;
  margin: 0 4%;

  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  overflow: hidden;
  border: 1px solid #999;

}
.textDiv span{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}
textarea{
  width: 100%;
  height: 90%;
  /*width: 92%;*/
  /*height: 250px;*/
  resize: none;
  background: #FAF9FE;
  /*border-radius: 10px;*/
  /*margin: 0 4%;*/
  border: none;
  padding: 10px;
  box-sizing: border-box;
  font-size: 15px;
  color: #333 !important;
  /*font-size: 13px;*/
  /*font-family: PingFang SC;*/
  /*font-weight: 500;*/
  /*color: #999999;*/
  /*overflow: auto;*/
}
.buttonDiv{
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  bottom: 0px;
  padding: 0 15px;
   box-sizing: border-box;
}
.buttonDiv button{
  width: 47%;
  height: 44px;
  border-radius: 10px;
  box-sizing: border-box;
  border: none;
  background: #1da4f2;
  font-size: 15px;
  color: #FFFFFF;
  font-family: "PingFang SC";
  font-weight: bold;
}
</style>
